import * as echarts from "echarts";

import "echarts@4.4.0/lib/chart/custom";
import "echarts@4.4.0/lib/component/tooltip";
import "echarts@4.4.0/extension/dataTool";
import { useEffect, useRef, useState } from "react";
import BannerPng from "@/assets/images/banner1.png";
import { post } from "@/request";
import { Tabs, type TabsProps } from "antd";

import * as Plotly from "plotly.js-dist-min";

export default function Statistics() {
  const pieChartRef = useRef<HTMLDivElement>(null);
  const pieChartRef1 = useRef<HTMLDivElement>(null);
  const chartRef2 = useRef<HTMLDivElement>(null);
  const chartRef3 = useRef<HTMLDivElement>(null);
  const chartRef4 = useRef<HTMLDivElement>(null);
  const chartRef5 = useRef<HTMLDivElement>(null);
  const chartRef6 = useRef<HTMLDivElement>(null);
  const chartRef7 = useRef<HTMLDivElement>(null);
  let chart: any;
  let chart1: any;
  let chart2: any;
  let chart3: any;

  const initChart = (data: any = []) => {
    chart = echarts.init(pieChartRef.current);
    chart.setOption({
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "80%",
          data: data.map((item: any) => ({ value: item.repeatsCount, name: item.repeats })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
  };
  const initChart1 = (data: any = []) => {
    chart1 = echarts.init(pieChartRef1.current);
    chart1.setOption({
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "Cofactors",
          type: "pie",
          radius: "80%",
          data: data.map((item: any) => ({ value: item.targetFieldCount, name: item.targetField })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
  };

  const initChart2 = (data: any = []) => {
    chart2 = echarts.init(chartRef2.current);
    chart2.setOption({
      dataset: [
        {
          source: data.map((item) => [...item.phValueList]),
        },
        {
          transform: {
            type: "boxplot",
            config: {
              itemNameFormatter: function (params) {
                return data[params.value].speciesName;
              },
            },
          },
        },
        {
          fromDatasetIndex: 1,
          fromTransformResult: 1,
        },
      ],
      tooltip: {
        trigger: "item",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "10%",
        right: "10%",
        bottom: "15%",
      },
      xAxis: {
        type: "category",
        boundaryGap: true,
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          rotate: 20,
        },
      },
      yAxis: {
        type: "value",
        splitArea: {
          show: true,
        },
      },
      series: [
        {
          name: "pH Distribution",
          type: "boxplot",
          datasetIndex: 1,
        },
        {
          name: "pH Distribution",
          type: "scatter",
          datasetIndex: 2,
        },
      ],
    });
  };
  const initChart3 = (data: any = []) => {
    chart3 = echarts.init(chartRef3.current);
    chart3.setOption({
      dataset: [
        {
          source: data.map((item) => [...item.tempValueList]),
        },
        {
          transform: {
            type: "boxplot",
            config: {
              itemNameFormatter: function (params) {
                return data[params.value].speciesName;
              },
            },
          },
        },
        {
          fromDatasetIndex: 1,
          fromTransformResult: 1,
        },
      ],
      tooltip: {
        trigger: "item",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "10%",
        right: "10%",
        bottom: "15%",
      },
      xAxis: {
        type: "category",
        boundaryGap: true,
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          rotate: 20,
        },
      },
      yAxis: {
        type: "value",
        splitArea: {
          show: true,
        },
      },
      series: [
        {
          name: "Temperature Distribution",
          type: "boxplot",
          datasetIndex: 1,
        },
        {
          name: "Temperature Distribution",
          type: "scatter",
          datasetIndex: 2,
        },
      ],
    });
  };

  const initChart4 = (dataSource: any = []) => {
    const data = dataSource.map((item) => ({
      type: "violin",
      y: item.kobs,
      box: { visible: true },
      meanline: { visible: true },
      x0: item.speciesName,
      name: item.speciesName,
      marker: { color: "rgba(0, 0, 255, 0.5)" },
      line: { color: "blue" },
    }));

    const layout = {
      title: "小提琴图示例",
      showlegend: false,
      yaxis: { zeroline: false, title: "值" },
      violingap: 0.05,
      violinscale: true,
      violinmode: "group",
      paper_bgcolor: "#f9f9f9",
      plot_bgcolor: "#f9f9f9",
      font: { family: "Arial, sans-serif", size: 14, color: "#333" },
      margin: { t: 50, b: 50, l: 50, r: 50 },
    };

    Plotly.newPlot(chartRef4.current, data, layout, { displayModeBar: false });
  };
  const initChart5 = (dataSource: any = []) => {
    const data = dataSource.map((item) => ({
      type: "violin",
      y: item.kcat,
      box: { visible: true },
      meanline: { visible: true },
      x0: item.speciesName,
      name: item.speciesName,
      marker: { color: "rgba(0, 0, 255, 0.5)" },
      line: { color: "blue" },
    }));

    const layout = {
      title: "小提琴图示例",
      showlegend: false,
      yaxis: { zeroline: false, title: "值" },
      violingap: 0.05,
      violinscale: true,
      violinmode: "group",
      paper_bgcolor: "#f9f9f9",
      plot_bgcolor: "#f9f9f9",
      font: { family: "Arial, sans-serif", size: 14, color: "#333" },
      margin: { t: 50, b: 50, l: 50, r: 50 },
    };

    Plotly.newPlot(chartRef5.current, data, layout, { displayModeBar: false });
  };
  const initChart6 = (dataSource: any = []) => {
    const data = dataSource.map((item) => ({
      type: "violin",
      y: item.km,
      box: { visible: true },
      meanline: { visible: true },
      x0: item.speciesName,
      name: item.speciesName,
      marker: { color: "rgba(0, 0, 255, 0.5)" },
      line: { color: "blue" },
    }));

    const layout = {
      title: "小提琴图示例",
      showlegend: false,
      yaxis: { zeroline: false, title: "值" },
      violingap: 0.05,
      violinscale: true,
      violinmode: "group",
      paper_bgcolor: "#f9f9f9",
      plot_bgcolor: "#f9f9f9",
      font: { family: "Arial, sans-serif", size: 14, color: "#333" },
      margin: { t: 50, b: 50, l: 50, r: 50 },
    };

    Plotly.newPlot(chartRef6.current, data, layout, { displayModeBar: false });
  };
  const initChart7 = (dataSource: any = []) => {
    const data = dataSource.map((item) => ({
      type: "violin",
      y: item.kcatKm,
      box: { visible: true },
      meanline: { visible: true },
      x0: item.speciesName,
      name: item.speciesName,
      marker: { color: "rgba(0, 0, 255, 0.5)" },
      line: { color: "blue" },
    }));

    const layout = {
      title: "小提琴图示例",
      showlegend: false,
      yaxis: { zeroline: false, title: "值" },
      violingap: 0.05,
      violinscale: true,
      violinmode: "group",
      paper_bgcolor: "#f9f9f9",
      plot_bgcolor: "#f9f9f9",
      font: { family: "Arial, sans-serif", size: 14, color: "#333" },
      margin: { t: 50, b: 50, l: 50, r: 50 },
    };

    Plotly.newPlot(chartRef7.current, data, layout, { displayModeBar: false });
  };

  const resizeEcharts = () => {
    try {
      chart && chart.resize();
      chart1 && chart1.resize();
      chart2 && chart2.resize();
      chart3 && chart3.resize();
      chartRef4.current && Plotly.Plots.resize(chartRef4.current);
      chartRef5.current && Plotly.Plots.resize(chartRef5.current);
      chartRef6.current && Plotly.Plots.resize(chartRef6.current);
      chartRef7.current && Plotly.Plots.resize(chartRef7.current);
    } catch (e) {}
  };

  const initAddEventListeren = () => {
    window.addEventListener("resize", resizeEcharts);
  };

  const getData = () => {
    post("/function/getStatisticalDataList").then((res) => {
      initChart(res);
    });
  };

  const getData1 = () => {
    post("/function/getStatisticalDataListByCofactor").then((res) => {
      initChart1(res);
    });
  };

  const getData2 = () => {
    post("/function/getStatisticalDataListByTempAndPh").then((res: any) => {
      initChart2(res.phDataLists);
      initChart3(res.tempDataLists);
    });
  };

  const getData3 = () => {
    post("/function/getStatisticalDataListByDistribution").then((res: any) => {
      initChart4(res.kobsDataLists);
      initChart5(res.kcatDataLists);
      initChart6(res.kmDataLists);
      initChart7(res.kcatKmDataLists);
    });
  };

  const [keyValue, setKeyValue] = useState("1");

  const onChange = (key: string) => {
    setKeyValue(key);
    setTimeout(() => {
      getData();
      // getData1();
      // getData2();
      // getData3();
    }, 0);
  };

  useEffect(() => {
    initAddEventListeren();
    getData();
    // getData1();
    // getData2();
    // getData3();
    // console.log(dataSouce, columns);
    return () => {
      window.removeEventListener("resize", resizeEcharts);
    };
  }, []);
  return (
    <div>
      <div
        style={{
          maxWidth: "1200px",
          fontSize: "50px",
          textAlign: "center",
          background: "#5ea1f7",
          color: "#fff",
          margin: "20px auto",
        }}
      >
        Statistics
      </div>
      <div style={{ maxWidth: "1200px", margin: "20px auto", background: "#fff", padding: "20px" }}>
        <div>
          <div style={{ fontSize: "20px", fontWeight: "700", textAlign: "center" }}>
            statistics of different repetitive units
          </div>
          <div style={{ marginTop: "40px", width: "100%", height: "600px" }}>
            <div style={{ width: "100%", height: "100%" }} ref={pieChartRef}></div>
          </div>
        </div>
        {/* <Tabs activeKey={keyValue} onChange={onChange} animated={true} destroyOnHidden={true}>
          <Tabs.TabPane
            key="1"
            tab="The amount of kinetic data for each ribozyme family"
            forceRender={false}
            style={{ flex: 1 }}
          >
           
          </Tabs.TabPane> */}
        {/* <Tabs.TabPane key="2" tab="Distribution of cofactors" forceRender={false}>
            <div>
              <div style={{ fontSize: "20px", fontWeight: "700" }}>Cofactors</div>
              <div style={{ marginTop: "40px", width: "100%", height: "600px" }}>
                <div style={{ width: "100%", height: "100%" }} ref={pieChartRef1}></div>
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane key="3" tab="Range of reaction condition" forceRender={false}>
            <div style={{ marginTop: "40px", display: "flex", alignItems: "center" }} className="condition">
              <div style={{ flex: "1" }}>
                <div style={{ fontSize: "20px", fontWeight: 700 }}>Temperature Distribution</div>
                <div style={{ width: "100%", height: "600px" }}>
                  <div style={{ width: "100%", height: "100%" }} ref={chartRef3}></div>
                </div>
              </div>

              <div style={{ flex: "1" }}>
                <div style={{ fontSize: "20px", fontWeight: 700 }}>pH Distribution</div>
                <div style={{ width: "100%", height: "600px" }}>
                  <div style={{ height: "100%" }} ref={chartRef2}></div>
                </div>
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane key="4" tab="The range of kinetic data" forceRender={false}>
            <div
              style={{
                marginTop: "40px",
                display: "grid",
                gridTemplateColumns: "repeat(2,1fr)",
                gap: "20px",
              }}
              className="kinetic"
            >
              <div style={{ width: "100%", height: "600px" }}>
                <div style={{ height: "100%" }} ref={chartRef4}></div>
              </div>
              <div style={{ width: "100%", height: "600px" }}>
                <div style={{ height: "100%" }} ref={chartRef5}></div>
              </div>
              <div style={{ width: "100%", height: "600px" }}>
                <div style={{ height: "100%" }} ref={chartRef6}></div>
              </div>
              <div style={{ width: "100%", height: "600px" }}>
                <div style={{ height: "100%" }} ref={chartRef7}></div>
              </div>
            </div>
          </Tabs.TabPane> */}
        {/* </Tabs> */}
      </div>
    </div>
  );
}
